<template>
  <div class="email-container">
    <div class="title">{{ title }}</div>
    <div class="sub-title">可选</div>
    <a-transfer :rowKey="record => record.id" :data-source="airFleetTransferList" :titles="['', '']"
      :render="item => item.name" :target-keys="targetKeys" :selected-keys="selectedKeys" :list-style="{
        width: '50%',
        height: '180px',
      }" @change="handleChange" @selectChange="handleSelectChange" @scroll="handleScroll" />
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
  props: {
    airFleetList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: () => []
    }
  },
  data() {
    return {
      targetKeys: [],
      selectedKeys: []
    };
  },
  computed: {
    ...mapState('emailNotification', ['notificationService']),
    airFleetTransferList() {
      return this.airFleetList.map(item => {
        item.key = item.id;
        item.title = item.name;
        return item;
      });
    }
  },
  mounted() {
    this.airFleetList.forEach(item => {
      item.key = item.id;
    });
    const emailRow = JSON.parse(localStorage.getItem('emailRow') ?? '{}');

    if (Object.values(emailRow)?.length > 0) {
      this.targetKeys = emailRow.fleetIds;
    }
  },
  methods: {
    ...mapMutations('emailNotification', ['setState']),
    handleChange(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys;
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, fleetIds: nextTargetKeys }});
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
    },
    handleScroll() {

    }
  }
};
</script>
<style lang="less" scoped>
.container {
  margin: 20px 0;
  .title {
      text-align: left;
      line-height: 14px;
      padding-left: 14px;
      position: relative;
      color: #21252E;
      margin-bottom: 12px;
      &:after{
        content: '';
        position: absolute;
        width: 2px;
        height: 14px;
        left: 0px;
        top: 0px;
        background: #30329C;
      }
  }
  .sub-title{
    color: #505363;
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 8px;
  }
}
</style>
<style scoped>
  .container /deep/ .ant-transfer-list-header{
    display: none;
  }
  .container /deep/ .ant-transfer-list{
    padding-top: 0;
  }
  .container /deep/ .ant-transfer-list-content>div:nth-child(odd){
    background: #F5F7FA;
  }
  .container /deep/ .ant-transfer-operation .ant-btn{
    width: 24px;
    height: 24px;
  }
</style>
